<template>
  <div>
    <!-- 面包屑导航区 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <el-row :gutter="30">
        <el-col :xs="15" :sm="10" :md="15" :lg="9" :xl="5">
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <!-- <el-col :span="4">
          <el-button type="primary">添加管理员</el-button>
        </el-col> -->
      </el-row>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="listLoading"
      >
        <el-table-column type="index" label="#" :index="indexMethod">
        </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column label="邮箱">
          <template slot-scope="scope">
            <span>{{
              scope.row.email == "" ? "暂未绑定邮箱" : scope.row.email
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phonenumber" label="电话">
          <template slot-scope="scope">
            <span>{{
              scope.row.contactInformation == ""
                ? "暂未绑定手机号"
                : scope.row.contactInformation
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间"> </el-table-column>
        <el-table-column label="第三方绑定">
          <template slot-scope="scope">
            <i
              style="color: green"
              class="layui-icon layui-icon-login-wechat"
            ></i>
            <i
              style="color: #409eff"
              class="layui-icon layui-icon-login-qq"
            ></i>
            <i
              style="color: #ff5722"
              class="layui-icon layui-icon-login-weibo"
            ></i>
            <i class="layui-icon layui-icon-login-wechat"></i>
          </template>
        </el-table-column>
         <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-switch
             inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
              v-model="scope.row.accountStatus"
              @click.native="ban_user(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click.native="delete_user(scope.row)"
            ></el-button>

            <el-tooltip effect="dark" content="近期登录" placement="top">
              <el-button
                size="mini"
                type="warning"
                  icon="el-icon-s-platform"
                @click.native="getloing(scope.row.userId)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column ref="echarts" type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="个人资产">
                <span>88892</span>
              </el-form-item>
              <el-form-item label="个人资产">
                <span>88892</span>
              </el-form-item>
              <el-form-item label="个人资产">
                <span>88892</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column> -->
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[3, 10, 20, 50, 100]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        pageNo="1"
      >
      </el-pagination>
    </el-card>
    <!-- 用户信息 -->
    <el-dialog
      title="用户近期登录记录"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-table :data="IPData" style="width: 100%">
        <el-table-column prop="loginTime" label="日期"> </el-table-column>
        <el-table-column prop="ip" label="IP"> </el-table-column>
        <el-table-column prop="userAddressDetail" label="地点">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange_ip"
        @current-change="handleCurrentChange_ip"
        :current-page="index_ip"
        :page-sizes="[3, 10, 20, 50, 100]"
        :page-size="pageSize_ip"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize_ip"
        pageNo="1"
      >
      </el-pagination>
       <el-row>
     <el-col :span="24"
          ><div class="grid-content bg-purple-dark"></div
        ></el-col>
      </el-row>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button  style="float: right" type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
   
    </el-dialog>
    <el-row :gutter="30">
      <el-col :span="10">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 100%; height: 400px"></div>
      </el-col>
      <el-col :span="10">
        <div id="main1" style="width: 100%; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { get_userlist, getUserLoginRecord , banAdmin,deleteAdmin} from "@/api/user_list";

export default {
  data() {
    return {
      listLoading: true,
      pageSize: 3,
      totalSize: null,
      index: 1,

      pageSize_ip: 3,
      totalSize_ip: null,
      index_ip: 1,
      userid: "", //被点击用户id
      dialogVisible: false,
      tableData: [], //用户列表
      IPData: [], //用户登录ip
    };
  },
  methods: {
      //删除用户
        delete_user(row) {
  
      this.$confirm("确定要删除该用户吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteAdmin({
            adminIds: row.userId,
          }).then((res) => {
            console.log(res);
            this.get_list(this.index, this.pageSize);
            this.$message({
              type: "success",
              message: "删除成功",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
      //禁用用户
         ban_user(row) {
      //判断是封禁还是解封
      let mes = "";
      if (row.accountStatus == 1) {
        mes = "确定要封禁该用户吗？";
      } else {
        mes = "确定要解封该用户吗？";
      }
      this.$confirm(mes + "是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //禁用管理员
          banAdmin({
            status: row.accountStatus,
            users: row.userId,
          }).then((res) => {
            console.log(res);
            this.get_list(this.index, this.pageSize);
          });
          this.$message({
            type: "success",
            message: row.accountStatus == 1 ? "封禁成功" : "解封成功",
          });
        })
        .catch(() => {
          this.get_list(this.index, this.pageSize);
          this.$message({
            type: "info",
            message: row.accountStatus == 1 ? "已取消封禁" : "已取消解封",
          });
        });
    },
    get_list(page,pageSize) {
      //获取用户列表
      console.log(this.$store.getters.token);
   
      get_userlist({ page:page, pageSize:pageSize }).then(
        (res) => {
          console.log(res);
          this.tableData = res.data.data.records;
          this.totalSize = res.data.data.total;
          this.listLoading = false;
        }
      );

      //   axios.get('http://localhost:8081/fl-admin/getAllNormalUserDetail',{

      //     params: {
      //       page:this.index,
      //       pageSize:this.pageSize
      //     },
      //      headers: {'Authorization': this.$store.getters.token}
      //   }).then((res)=>{
      //     console.log(res)
      //     this.tableData=res.data.data.records;
      //     console.log(this.tableData)
      //     this.totalSize= res.data.data.total
      //   })
    },
    getloing(userid) {
      //获取用户最近登录信息
      this.userid = userid;
      this.dialogVisible = true;
      console.log(userid);
      getUserLoginRecord({
        userId: userid,
        page: this.index_ip,
        pageSize: this.pageSize_ip,
      }).then((res) => {
        console.log(res);
          this.IPData = res.data.data.records;
          console.log(this.IPData);
          this.totalSize_ip = res.data.data.total;
      });
    //   axios
    //     .get("/fl-user/getUserLoginDetailByUserId", {
    //       params: {
    //         userId: userid,
    //         page: this.index_ip,
    //         pageSize: this.pageSize_ip,
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res);
    //       this.IPData = res.data.data.records;
    //       console.log(this.IPData);
    //       this.totalSize_ip = res.data.data.total;
    //     });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.get_list(this.index, this.pageSize);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.index = val;
      this.get_list( this.index, this.pageSize);
    },
    handleSizeChange_ip(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize_ip = val;
      this.getloing(this.userid);
    },
    handleCurrentChange_ip(val) {
      // console.log(`当前页: ${val}`);
      this.index_ip = val;
      this.getloing(this.userid);
    },
  },

  created() {
    this.get_list(this.index, this.pageSize);
    console.log("sx");
  },
};
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.el-pagination {
  padding: 10px;
  float: right;
 
}
</style>
